<template>
  <div class="app-container">
    <el-button type="primary" @click="goBind('')">绑定新设备</el-button>
    <el-table v-loading="tableLoading" :data="tableData" border stripe style="margin-top: 20px; width: 100%">
      <el-table-column prop="deviceNo" label="编号"> </el-table-column>
      <el-table-column prop="typeName" label="名称"> </el-table-column>
      <el-table-column prop="bindTime" label="绑定时间"> </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="300px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-search" @click="showDetails(scope.row.deviceNo)">设备详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-search" v-if="scope.row.helpManualUrl"
            @click="openDocument(scope.row.helpManualUrl)">使用说明书</el-button>
          <el-button size="mini" type="text" icon="el-icon-refresh-left" @click="goBind(scope.row.deviceNo)">更换设备
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="$refs.basicsForm.formValid()" />
      <el-dialog :title="oldDeviceNo?'换绑设备':'绑定设备'" :visible.sync="openView" width="700px" append-to-body>
          <basics-form
            style="margin-left: 100px"
            ref="basicsAddForm"
            :titleAligin="'right'"
            :titleWidth="'150px'"
            @selectCallback="selectCallback"
            :actionLoading="loading"
            @actionBtnsClick="addAction"
            @submit="addSubmit"
          />
      </el-dialog>
  </div>
</template>

<script>
  import BasicsForm from "@/components/BasicsForm";
  import {
    bindDeviceListOfWeb,
    getDeviceDetailByScanCodeOfWeb,
    bindDeviceOfWeb,
    bindDeviceChangeOfWeb
  } from "@/api/manbing/patient";
  import {
    unbindList
  } from "@/api/manbing/hospital";
  export default {
    name: "patient-bind",
    components: {
      BasicsForm
    },
    data() {
      return {
        loading: false,
        tableLoading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        tableData: [],
        oldDeviceNo: '',
        openView:false,
      };
    },
    created() {},
    methods: {
      init(patientId) {
        this.tableData=[]
        this.queryParams.pageNum=1
        this.queryParams.patientId = patientId;
        this.$nextTick(() => {
          this.getList();
        });
      },
      //列表数据
      getList() {
        this.loading = true;
        this.tableLoading = true;
        bindDeviceListOfWeb(this.queryParams)
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.rows;
              this.total = res.total;
            }
          })
          .finally(() => {
            this.loading = false;
            this.tableLoading = false;
          });
      },
      goBind(oldDeviceNo ) {
        this.oldDeviceNo = oldDeviceNo
        this.openView = true;
        this.$nextTick(() => {
          this.getDeviceNos();
        });
      },
      getDeviceNos(){
          unbindList().then(res=>{
            if(res.code==200){
              if(res.data.length){
                this.initAddRules(res.data)
              }else{
                this.$modal.msgWarning("已无空闲设备");
              }
            }
          })
      },
      initAddRules(devices) {
        let data = this.item ? this.item : {};
        let rules = [{
            title: "现有设备列表",
            key: "a",
            type: "select",
            selectList: devices,
            selectKey: "deviceNo",
            selectShowKey: "deviceNo",
            skip:true,
            callback:true
          },
          {
            title: "设备编号",
            key: "deviceNo",
          },
          {
            type: "actionBtns",
            selectList: [
              { name: "取消", value: "" },
              { name: "提交", value: "primary" },
            ],
            btnsAligin: "center",
            ruleWidth: "503px",
          },
        ];
        this.$nextTick(() => {
          this.$refs.basicsAddForm.initForm(rules);
        });
      },
      selectCallback(data){
        console.log(data,'----');
        this.$refs.basicsAddForm.changeParamValue({
          key: "deviceNo",
          value: data.value
        });
      },
      addAction(index) {
        if (index) {
          this.$refs.basicsAddForm.formValid();
        } else {
          this.openView = false;
        }
      },
      addSubmit(param){
        if (!param) {
          return;
        }
        this.showDetails(param.deviceNo,true)
      },
      //设备详情
      showDetails(deviceNo,flag) {
        getDeviceDetailByScanCodeOfWeb({
          deviceNo
        }).then(res => {
          if (res.code == 200) {
            let content =
              `<div>设备编号：${res.data.deviceNo}<br/> 设备名称：${res.data.typeName}<br/>生产厂家：${res.data.factory||'--'}<br/>出厂日期：${res.data.dateOfProduction||'--'}</div>`
            this.$alert(content, '设备详情',{
              confirmButtonText:flag? '确认绑定':'知道了',
              dangerouslyUseHTMLString: true
            } ).then(() => {
              if(flag){
                let api=this.oldDeviceNo?bindDeviceChangeOfWeb:bindDeviceOfWeb
                api({ patientId:this.queryParams.patientId,deviceNo:res.data.deviceNo,oldDeviceNo:this.oldDeviceNo }).then(resp=>{
                  if(resp.code==200){
                    this.$modal.msgSuccess(this.oldDeviceNo?"更换成功":'绑定成功');
                    this.openView = false;
                    this.getList()
                    this.$emit('getList')
                  }
                })
              }
            })
          }
        })
      },
      //打开使用说明
      openDocument(url) {
        window.open(url)
      },
    },
  };
</script>
